<template >
    <div class="mavonEditor">
      <div class="article-container md">
        <div class="article-information">
          <div class="top-line">
            <div class="article-title">
              {{article.title}}
            </div>
            <div class="article-type-container">
              <el-tag v-if="article.type==='原创'" type="success" effect="dark" class="article-type">原创</el-tag>
              <a :href="article.reprintURL"><el-tag v-if="article.type==='转载'" type="error" effect="dark">转载</el-tag></a>
            </div>
          </div>
          <div class="first-line">
            <div class="article-author"><i class="el-icon-s-custom"></i> {{article.author}}</div>
            <div class="article-create-time"><i class="el-icon-time"></i>{{article.gmtCreate}}</div>
            <div class="article-view"><i class="iconfont">&#xe68e;</i> {{article.views}}</div>
          </div>
          <div class="second-line">

            <div class="article-category-container">
              <span>文章分类:</span>
              <el-button>
                {{ article.category}}
              </el-button>
            </div>
            <div class="article-tag-container">
              <span>文章标签:</span>
              <el-tag class="article-tag" v-for="tag in article.tags" :key="tag">
                {{tag}}
              </el-tag>
            </div>
          </div>
        </div>
        <mavon-editor
            id="content"
            :value="content"
            :subfield = "prop.subfield"
            :defaultOpen = "prop.defaultOpen"
            :toolbarsFlag = "prop.toolbarsFlag"
            :editable="prop.editable"
            :scrollStyle="prop.scrollStyle"
            :ishljs="prop.ishljs"
            :codeStyle="prop.codeStyle"
            :navigation="false"
        >
        </mavon-editor>
      </div>
      <div class="rightContainer">
        <div class="rightContent"  v-show="showContent">
          <div id="left"></div>
          <transition name="el-fade-in">
            <el-tree
                :data="catalogs"
                node-key="id"
                :expand-on-click-node="false"
                :props="defaultProps"
                class="tree"
                v-show="showContent"
            >
          <span class="custom-tree-node" slot-scope="{node,data}">
            <a :href="'#'+data.id" class="toc_link"><span style="text-overflow: ellipsis">{{node.label}}</span></a>
          </span>
            </el-tree>
          </transition>
        </div>
        <float-window @getContent="getContent" type="check" :id="id"></float-window>
      </div>
    </div>
</template>


<script>
import {checkArticle, getArticles} from "@/api/article";
import {MyStack} from "@/utils/Stack";
import {getYearMonthDay} from "@/utils/handleSearch";
import FloatWindow from "@/components/floatWindow";


export default {
  name: "Article",
  components: {FloatWindow},
  props: ['id'],
  data: function () {
    return {
      article:'',
      content:'',
      showContent:false,
      catalogs:[],
      defaultProps: {
        children: 'children',
        label: 'label',
        text:'text',
        weight:'weight'
      }
    };
  },
  created: function () {
    let articleId = this.id
    checkArticle(articleId)
    getArticles({articleId}).then((res) => {
      this.content = res.data.data.list[0].content;
      this.article=res.data.data.list[0]
    })
  },
  methods:{
    getDate(){
      return getYearMonthDay(this.article.gmtCreate)
    },
    getContent(){
      this.showContent=!this.showContent
      if(this.catalogs.length>0)
        return;
      var dom = document.getElementsByClassName('v-note-navigation-content');
      dom[0].innerHTML=''
      this.show('.v-show-content>h1,h2,h3,h4,h5,h6', 'left', 3)
    },
    show(toc_selector,wrap_id,min_nr){
      var wrap = document.getElementById(wrap_id);
      var hlist = document.querySelectorAll(toc_selector);
      if (!wrap)
        return;
      if (!hlist || hlist.length <= min_nr) {
        wrap.style.display = 'none';
        this.$message.info("这篇文章没有目录！")
        this.showContent=false
        return;
      }
      let stack = MyStack()
      let preTag=null;
      let n=hlist.length;
      n>>=1;
      for (let i = 0; i <n; i++) {
        let href = document.createElement('a');
        href.id = 'i_' + i;
        hlist[i].appendChild(href);
        console.log(hlist[i].innerText)
        const curTag = new Object({id: href.id, label: hlist[i].innerText,weight:Number(hlist[i].tagName[1]), children: []}) ;
        // 没有更高级的元素
        if(preTag===null){
          preTag=curTag;
          this.catalogs.push(curTag)
        }
        // 下去
        else if(preTag.weight<curTag.weight){
          console.log('>')
          stack.push(preTag);
          preTag.children.push(curTag)
          preTag=curTag
        }
        // 上去
        else if (preTag.weight>curTag.weight)
        {
          console.log('<')
          var isAdd=false
          while(!stack.isEmpty()){
            let pop = stack.pop();
            if(pop.weight<curTag.weight){
              isAdd=true
              pop.children.push(curTag)
              stack.push(pop)
              break;
            }
          }
          if(!isAdd){
            console.log('推入',curTag.weight)
            this.catalogs.push(curTag)
          }
          preTag=curTag;
        }
        // 相等
        else if(preTag.weight===curTag.weight){
          console.log('equal')
          let pop1 = stack.pop();
          if(pop1!==undefined&&pop1!==null)
          {
            pop1.children.push(curTag)
            stack.push(pop1)
            console.log('推入',pop1.weight)
          }
          else{
            this.catalogs.push(curTag)
          }
          preTag=curTag
        }
      }
      console.log(this.catalogs)
    }
  },
  computed: {
    prop () {
      return {
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
        ishljs: true,
        codeStyle: 'tomorrow-night-blue',
        navigation: false
      }
    }
  },
}
</script>

<style>
#content{
  font-size: 19px!important;
}
#content strong{
  font-size: 21px !important;
  font-weight: bolder;
  color: black;
}
.article-tag{
  margin-left: 10px;
}
.article-information div{
  line-height: 100%;
}
.article-information div{
  margin-top: 10px;
}
.article-information {
  padding-left: 30px;
  text-align: left;
  position: relative;
  line-height: 100%;
  align-items: center;
}
.second-line {
  align-items: center;
}
.first-line,.second-line{
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.first-line div,.second-line div{
  margin-right: 20px;
}
.article-tag{
  margin-right: 10px;
}
.article-title {
  font-size: 29px;
  font-weight: bold;
  margin-bottom: 20px;
}
.top-line{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
.article-type-container{
  margin-left: 10px;
}
.rightContent {
  height: 600px;
  width: 270px;
  top: 0;
  right: 0;
  position: sticky;
  overflow-y: auto !important;
  margin-left: 40px;
  overflow-x: hidden;
  border: 1px solid black;
}
.rightContainer{
  position: sticky;
  top:40px;
  max-height: 950px;
}
.right-bottom-group{
  position: sticky;
  top: 20px;
}
.md{
  background-color: rgb(251, 251, 251);
  width: 80%;
}
#category li a:before { /* 添加一个折叠符号，为了好看 */
  content: "∟";
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: 12px;
}
.mavonEditor{
  position: relative;
  display: flex;
}
#left {
  position: absolute;
  left: 40px;
  top: 40px;
  text-align: left;
  height: 400px;
  max-width: 300px;
  white-space: nowrap;
  background-color: red;
}
.toc_link {
  display: inline-block;
  font-weight: normal;
  text-decoration: none;
  text-overflow: ellipsis;
}
.toc_link:link,.toc_link:active,.toc_link:visited {
  color: black;
}
.toc_link:hover{
  font-weight: bold;
  text-decoration: violet;
}

</style>
